﻿@set folder-view
{
  :root {
    prototype: FolderView url(folder-view.js);
    display:block;
    size:*;
    flow:vertical; 
    background: color(widget-back);
    border: 1px solid color(widget-border);
  }  

  select.path {
    display:block;
    width:*;
    flow:horizontal;
    overflow:none;
    height:1.6em;
    border:none;
    background:none;
  }

  select.path > option {
    height:1.6em;
    line-height:height(100%);
    max-width:max-content;
    padding:0;
  }

  select:not(:focus) > option {background:transparent;}

  select.path > option:nth-child(1n+2)::after {
    content:"/";
  }

  select.path > option.up {
    width:24px; 
    height:1.6em;
    max-width:24px; 
    min-width:24px; 
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-image: url(path: M52,83.999V21.655l21.172,21.172c1.562,1.562,4.094,1.562,5.656,0c1.562-1.562,1.562-4.095,0-5.657l-28-28
      c-1.562-1.562-4.095-1.562-5.656,0l-28,28C16.391,37.951,16,38.974,16,39.999c0,1.023,0.391,2.047,1.172,2.828
      c1.562,1.562,4.095,1.562,5.656,0L44,21.655v62.344c0,2.209,1.791,4,4,4S52,86.208,52,83.999z);
    background-size: 0.7em; 
    fill: color(button-text);
    stroke:none;
  }

  select.content {
    display:block;
    size:*;
    flow:vertical-wrap;
    overflow-x:scroll-indicator;
    overflow-y:none;
    border-spacing:3px 1px;
    border:none;
    background: color(widget-back);
    border-top: 1px solid color(widget-border);
  }  

  select.content > option 
  {
    foreground-repeat: no-repeat;
    foreground-position: 2px 50%;
    padding-left: 24px;
    padding-right: 4px;
    width:max-content;
    max-width:100%;
    overflow-x:hidden;
    text-overflow:ellipsis;
    flow:text;
  }

  select.content > option.file { behavior:shell-icon; /*shows real icons*/ } 

  select.content > option.folder { 
    foreground-image:url(path:M1728 608v704q0 92-66 158t-158 66h-1216q-92 0-158-66t-66-158v-960q0-92 66-158t158-66h320q92 0 158 66t66 158v32h672q92 0 158 66t66 158z); 
    fill:#FFDEAD;
    stroke:#000;
    stroke-width:1ppx;
    foreground-size:16px; 
  } 
}

/* this allows it to be used in HTML as <folder /> */
folder {
  style-set: folder-view;
}